<style lang="less">
.hmOrderList {
}
</style>
<template>
    <div class="hmOrderList">
        <Card>
            <Row v-show="openSearch">
                <Form ref="searchForm" :model="searchForm" inline :label-width="70" @keydown.enter.native="handSearch">
                    <FormItem label="订单编号">
                        <Input type="text" v-model="searchForm.orderNum" placeholder="请输入" clearable style="width: 200px"/>
                    </FormItem>
                    <FormItem label="是否升级项目" :label-width="100">
                        <Select v-model="searchForm.isUp" style="width: 200px">
                            <Option :value="1">是</Option>
                            <Option :value="0">否</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="客户姓名">
                        <Input type="text" v-model="searchForm.receiverName" placeholder="请输入" clearable style="width: 200px"/>
                    </FormItem>
                    <FormItem label="客户电话">
                        <Input type="text" v-model="searchForm.receiverMobile" placeholder="请输入" clearable style="width: 200px"/>
                    </FormItem>
                    <FormItem label="订单状态">
                        <Select v-model="searchForm.status" style="width: 200px">
                            <Option v-for="(item,index) in statusList" :key="index" :value="item.value">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="下单时间">
                        <DatePicker v-model="dateRange" type="datetimerange" placeholder="请选择日期" style="width: 320px" @on-change="selectDateRange"/>
                    </FormItem>
                    <Form-item style="margin-left:-35px" class="br">
                        <Button @click="handSearch" type="primary" icon="ios-search">搜索</Button>
                        <Button @click="handReset">重置</Button>
                    </Form-item>
                </Form>
            </Row>
            <div>
                <Table :loading="loading" border :columns="columns" sortable="custom" :data="data" @on-sort-change="changeSort" ref="table">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" @click="handLook(row, index)" size="small">
                            <Icon type="ios-eye-outline"/>
                            查看
                        </Button>
                    </template>
                </Table>
            </div>
            <Row type="flex" justify="end" class="page">
                <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize"
                      :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
            </Row>
        </Card>
        <updateHmOrder v-model="updateShow" :HmOrderId="HmOrderId" :modalTitle="title" v-on:handSearch="handSearch"></updateHmOrder>
    </div>
</template>
<script>
import {deleteHmOrder, queryHmOrderList} from '@/api/hmzd/hmOrder'
import updateHmOrder from './updateHmOrder'

export default {
    components: {
        updateHmOrder
    },
    data() {
        return {
            drop: false,
            dropDownContent: "展开",
            dropDownIcon: "ios-arrow-down",
            search: '',
            data: [],
            columns: this.getHmOrderColumns(),
            openSearch: true,//打开搜索
            openTip: true,//打开提示
            loading: true, // 表单加载状态
            selectCount: 0, // 多选计数
            selectList: [], // 多选数据
            searchForm: {
                // 搜索框对应data对象
                orderNum: '',
                isUp: '',
                receiverName: '',
                receiverMobile: '',
                pageNumber: 1, // 当前页数
                pageSize: 10, // 页面大小
                startDate: null,//开始时间
                endDate: null,//结束时间
                sort: 'createTime', // 默认排序字段
                order: 'desc' // 默认排序方式
            },
            total: 0,
            title: '',
            HmOrderId: '',
            updateShow: false,
            tableHeight: 200,
            dateRange: [],
            statusList: [
                {
                    name: '未支付',
                    value: 0
                },
                {
                    name: '已支付',
                    value: 1
                },
                {
                    name: '技师接单',
                    value: 2
                },
                {
                    name: '技师途中',
                    value: 3
                },
                {
                    name: '技师到达',
                    value: 4
                },
                {
                    name: '开始服务',
                    value: 5
                },
                {
                    name: '结束服务',
                    value: 6
                },
                {
                    name: '已评价',
                    value: 7
                },
                {
                    name: '订单失效',
                    value: -1
                },
            ]
        }
    },
    methods: {
        //时间选择事件
        selectDateRange(v) {
            if (v) {
                this.searchForm.startDate = v[0];
                this.searchForm.endDate = v[1];
            }
        },
        //查看
        handLook(row, index) {
            this.title = '查看';
            this.HmOrderId = row.id.toString();
            this.updateShow = true;
        },
        //分页查询
        getDataList() {
            this.loading = true;
            queryHmOrderList(this.searchForm).then(res => {
                if (res.success) {
                    this.loading = false;
                    this.data = res.data.records;
                    this.total = res.data.total;
                }
            });
        },
        //改变页码
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        //改变每页显示数据的条数
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        //改变排序方式
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        //查询
        handSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.getDataList();
        },
        //重置
        handReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.searchForm.startDate = null;
            this.searchForm.endDate = null;
            this.selectDate = null;
            this.searchForm.orderNum = '';
            this.searchForm.isUp = '';
            this.searchForm.status = '';
            this.searchForm.receiverName = '';
            this.searchForm.receiverMobile = '';
            this.dateRange = []
            // 重新加载数据
            this.getDataList();
        },
        //获取列表字段
        getHmOrderColumns() {
            return [
                {
                    title: '订单编号',
                    align: 'center',
                    minWidth: 180,
                    ellipsis: true,
                    tooltip: true,
                    key: 'orderNum',
                    sortable: false
                },
                {
                    title: '订单金额',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'orderPrice',
                    sortable: false
                },
                {
                    title: '项目名称',
                    align: 'left',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'projectName',
                    sortable: false
                },
                {
                    title: '客户姓名',
                    align: 'center',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    key: 'receiverName',
                    sortable: false
                },
                {
                    title: '客户电话',
                    align: 'center',
                    minWidth: 150,
                    ellipsis: true,
                    tooltip: true,
                    key: 'receiverMobile',
                    sortable: false
                },
                {
                    title: '技师姓名',
                    align: 'center',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    key: 'technicianName',
                    sortable: false
                },
                {
                    title: '下单时间',
                    key: 'createTime',
                    sortable: true,
                    align: 'center',
                    width: 180,
                },
                {
                    title: '车费费用',
                    align: 'center',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    key: 'carMoney',
                    sortable: false
                },
                {
                    title: '订单状态',
                    align: 'center',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    key: 'status',
                    sortable: false,
                    render: (h, params) => {
                        let find = this.statusList.find(item => item.value == params.row.status);
                        return h('div', find ? find.name : '');
                    },
                },
                {
                    title: '是否升级项目',
                    align: 'center',
                    minWidth: 120,
                    ellipsis: true,
                    tooltip: true,
                    key: 'isUp',
                    sortable: false,
                    render: (h, params) => {
                        return h('div', params.row.isUp == 1 ? '是' : '否');
                    },
                },
                {
                    title: '优惠金额',
                    align: 'center',
                    minWidth: 100,
                    ellipsis: true,
                    tooltip: true,
                    key: 'discountPrice',
                    sortable: false
                },
                {
                    title: '操作',
                    align: 'center',
                    slot: 'action',
                    width: 150,
                }
            ]
        }
    },
    mounted() {
        this.getDataList();
    }
}
</script>
<style scoped="less">
.operation {
    margin-bottom: 10px;
}
</style>
